<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <span>用户名</span>
        <input placeholder="请你输入用户名" class="inp">
        <span class="sp"></span>
    </div>
</body>
<script>
    var inp = document.querySelector('.inp');
    inp.addEventListener('blur', function() {
        var sp = document.querySelector('.sp');
        console.log(this.value);
        if (this.value == null || this.value == undefined || this.value == '') {
            sp.innerHTML = '用户名不能为空';
            this.placeholder = '';
        } else {
            sp.innerHTML = '用户名可以注册';
        }
    })
</script>

</html>